<div class="message_container">
  <div class="row">
		<div class="col-md-1">
		  <button class="btn btn-default push_msg" type="submit">发布资讯</button>
    </div>
    <div class="col-md-1 text" style="margin-left: 580px;">
      <span>所属栏目</span>
    </div>
    <div class="col-md-2">
      <select class="form-control message_text">
        <option class="val" >请选择所属栏目</option>
      <!-- <option value="">hh</option> -->
      </select>
    </div>
    <div class="col-md-1 text" style="width: 50px;">
      <span>标题</span>
    </div>
    <div class="col-md-2">
      <input type="text" class="form-control user_search_text" id="exampleInputName2" >
   </div>
   
	</div>
	<div class="row">
		<table class="table table-hover">
		 <thead>
		   <th>序号</th>
		   <th>标题</th>
		   <th>发布日期</th>
		   <th>所属栏目</th>
		   <th>操作</th>
		 </thead>
		 <tbody>
		   <!-- <tr>
			 <td>1</td>
			 <td>usernaem</td>
			 <td>name</td>
			 <td>role</td>
			 <td>18777772222</td>
			 <td>
			   <span>设置</span>
			   <span>移出</span>
			   <span>详情</span>
			   <span>修改</span>
			 </td>
		   </tr> -->
		   
		 </tbody>
	  </table>
	</div>
</div>
<script>
var baseUrl='http://123.57.57.227:7788/';
var id;
//封装请求函数
function getData(url,type){
	//ajax异步
	var p=new Promise((resolve,reject)=>{
		$.ajax({
			url:url,
			type:type,
			headers:{
				"Authorization":sessionStorage.getItem("token")
			},
			success:function(data){
				resolve(data);
			}
		});
	});
	return p;
}
//声明插入表格函数
function getTbody(item,index,arr){
    $('.message_container tbody').append(`<tr>
      <td>`+(index+1)+`</td>
      <td>`+item.title+`</td>
      <td>`+new Date(item.publishTime).toLocaleDateString()+`</td>
      <td>`+item.category.name+`</td>
      <td>
        <span>查看<span>
        <span>编辑<span>
        <span>删除<span>
      </td>
  </tr>`)
  
}
getData(baseUrl+'category/findAll','get').then(function(data){
  data.data.forEach(function(item){
    $('.message_container .val').after(`<option>`+item.name+`</option>`)
  })
})

getData(baseUrl+'article/cascadeFindAll','get').then(function(data){
  // console.log(data.data)
  data.data.forEach(function(item,index){
    getTbody(item,index);
    //绑定下拉菜单搜索事件
    $('.message_container .message_text').on('click','option',function(){
        // console.log($(this).val())
      $('.message_container tbody').empty();
      if(item.category.name==$(this).val()){
        // console.log(item.id);
        getData(baseUrl+'article/findById?id='+item.id,'get').then(function(data){
          // console.log(data)
          getTbody(data.data,$('tr').length-1)    
        })
      }
    })
  })
});





</script>
<style>
  .message_container{
      /* height: 100px; */
      padding-left:10px;
      color: #666666;
  }
  .message_container .col-md-1,.message_container .col-md-2{
      height:32px;
      /* color: #2cb5ac; */
	    padding-left: 5px;
  }
  .message_container .col-md-2 select,.message_container .col-md-2 input{
      height: 32px;
      font-size: 12px;
  }
  .message_container .text{
      line-height:32px;
      text-align:right;
      padding-left: 0;
  }
  .message_container .text span{
      font-weight: 800;
  }
	.message_container .btn-default{
      color:#fff;
      background-color: #2cb5ac;
      font-size: 12px;
  }
  .message_container table td span:hover{
      cursor: pointer;
  }
	.message_container table th,.message_container table td{
      font-size: 12px;
  }
  .message_container th:first-child,.message_container table td:first-child{
      width: 100px;
  }
  .message_container th:nth-child(2),.message_container table td:nth-child(2){
      width: 350px;
  }
  .message_container th:nth-child(4),.message_container table td:nth-child(4){
      width: 500px;
  }
</style>